<template>
  <div class="new-call-container">
    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 顶部搜索栏 -->
      <div class="search-bar">
        <div class="search-input">
          <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="#666"/>
          </svg>
          <input type="text" placeholder="Find contact, call ..." class="search-field" />
        </div>
      </div>

      <!-- 标题和返回按钮 -->
      <div class="header">
        <div class="back-button" @click="goBack">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" fill="#666"/>
          </svg>
        </div>
        <h1 class="page-title">New call</h1>
      </div>

      <!-- 联系人搜索输入框 -->
      <div class="contact-search">
        <div class="contact-input-container">
          <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="#666"/>
          </svg>
          <input type="text" placeholder="Find contact" class="contact-input" v-model="phoneNumber" />
          <div class="dialpad-icon" @click="showDialpad = true">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 4h4v4H4V4zm6 0h4v4h-4V4zm6 0h4v4h-4V4zM4 10h4v4H4v-4zm6 0h4v4h-4v-4zm6 0h4v4h-4v-4zM4 16h4v4H4v-4zm6 0h4v4h-4v-4zm6 0h4v4h-4v-4z" fill="#666"/>
            </svg>
          </div>
        </div>
      </div>

      <!-- 建议列表 -->
      <div class="suggestions-section">
        <div class="suggestions-header" @click="toggleSuggestions">
          <h3 class="suggestions-title">Suggestions</h3>
          <svg :class="['chevron-up', { collapsed: suggestionsCollapsed }]" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="#666"/>
          </svg>
        </div>
        
        <div class="suggestions-list" v-show="!suggestionsCollapsed">
          <div 
            class="suggestion-item" 
            v-for="(s, idx) in topSuggestions" 
            :key="s.target + '-' + s.timestamp"
            @click="callSuggestion(s.target)"
          >
            <div class="suggestion-avatar">
              <span class="avatar-number">{{ idx + 1 }}</span>
            </div>
            <div class="suggestion-info">
              <div class="suggestion-name">{{ s.display || s.target }}</div>
              <div class="suggestion-address">{{ formatSuggestionSubline(s.timestamp) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 拨号盘弹窗 -->
    <div v-if="showDialpad" class="dialpad-overlay" :style="dialpadOverlayStyle">
      <div class="dialpad-modal" @click.stop>
        <!-- 拨号盘头部 -->
        <div class="dialpad-header">
          <div class="dialpad-close" @click="closeDialpad">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="#666"/>
            </svg>
          </div>
        </div>



        <!-- 拨号盘按钮 -->
        <div class="dialpad-grid">
          <div class="dialpad-row">
            <button class="dialpad-button" @click="addNumber('1')">1</button>
            <button class="dialpad-button" @click="addNumber('2')">2</button>
            <button class="dialpad-button" @click="addNumber('3')">3</button>
          </div>
          <div class="dialpad-row">
            <button class="dialpad-button" @click="addNumber('4')">4</button>
            <button class="dialpad-button" @click="addNumber('5')">5</button>
            <button class="dialpad-button" @click="addNumber('6')">6</button>
          </div>
          <div class="dialpad-row">
            <button class="dialpad-button" @click="addNumber('7')">7</button>
            <button class="dialpad-button" @click="addNumber('8')">8</button>
            <button class="dialpad-button" @click="addNumber('9')">9</button>
          </div>
          <div class="dialpad-row">
            <button class="dialpad-button" @click="addNumber('*')">*</button>
            <button class="dialpad-button" @click="addNumber('0')">0</button>
            <button class="dialpad-button" @click="addNumber('#')">#</button>
          </div>
        </div>

        <!-- 拨号和删除按钮 -->
        <div class="dialpad-actions">
          <button class="call-button" @click="makeCall">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 00-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19c-.54 0-.99.45-.99.99 0 9.36 7.59 16.95 16.95 16.95.54 0 .99-.45.99-.99v-3.45c0-.54-.45-.99-.99-.99z" fill="white"/>
            </svg>
          </button>
          <button class="delete-button" @click="deleteNumber">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H7.07L2.4 12l4.66-7H22v14zm-11.59-2L14 13.41 17.59 17 19 15.59 15.41 12 19 8.41 17.59 7 14 10.59 10.41 7 9 8.41 12.59 12 9 15.59z" fill="white"/>
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- 外呼弹框（非模态，贴底展示） -->
    <div v-if="showOutgoing" class="dialpad-overlay" :style="dialpadOverlayStyle">
      <div class="outgoing-modal" @click.stop>
        <div class="outgoing-header">
          <div class="outgoing-title">Outgoing call</div>
          <div class="dialpad-close" @click="showOutgoing=false">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="#666"/>
            </svg>
          </div>
        </div>
        <div class="outgoing-body">
          <div class="callee-avatar">{{ (outgoingInfo?.target || '?')[0] || '?' }}</div>
          <div class="callee-name">{{ outgoingInfo?.target || 'Unknown' }}</div>
          <div class="callee-sip">sip:{{ outgoingInfo?.target }}@{{ outgoingInfo?.targetHost }}</div>
        </div>
        <div class="outgoing-actions">
          <div class="call-timer" v-if="callAnswered">{{ elapsedText }}</div>
          <button class="hangup-button" @click="endCall">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 15.46l-5.27-1.23c-.34-.08-.7 0-.97.22l-2.17 1.76a16.88 16.88 0 0 1-7.8-7.8l1.76-2.17c.23-.27.31-.63.22-.97L5.54 3c-.14-.58-.7-.97-1.3-.9L2.1 2.34C1.47 2.43 1 2.99 1 3.63 1 13.39 8.61 21 18.37 21c.64 0 1.2-.47 1.29-1.1l.24-2.13c.07-.6-.32-1.16-.9-1.31z" fill="white"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewCallPage',
  data() {
    return {
      showDialpad: false,
      phoneNumber: '',
      sidebarCollapsed: false,
      showOutgoing: false, // 是否显示外呼弹框
      outgoingInfo: null,  // 外呼信息：目标、主机、绑定IP
      topSuggestions: [],  // 最近通话记录 Top3（去重）
      suggestionsCollapsed: false, // 建议列表是否折叠
      // 通话计时
      callAnswered: false,
      callTimerId: null,
      elapsedSeconds: 0,
    }
  },
  mounted() {
    // 监听侧边栏状态变化
    this.checkSidebarState();
    window.addEventListener('storage', this.handleStorageChange);
    
    // 检查是否有预填号码
    if (this.$route.query.number) {
      this.phoneNumber = this.$route.query.number;
      this.showDialpad = true;
    }

    // 初次加载建议项
    this.loadSuggestions();

    // 监听后端呼叫事件
    if (window.__TAURI__ && window.__TAURI__.event) {
      const { listen } = window.__TAURI__.event;
      listen('call_event', (event) => {
        const payload = event.payload || {};
        console.log('呼叫事件:', payload);
        if (payload.type === 'dialing') {
          this.showDialpad = false;
          this.showOutgoing = true;
          this.outgoingInfo = {
            target: payload.target,
            targetHost: payload.target_host,
            bindIp: payload.bind_ip,
          };
        } else if (payload.type === 'answered') {
          // 通话接通，开始计时
          this.showOutgoing = true;
          this.startCallTimer();
        } else if (payload.type === 'terminated') {
          // 通话结束，停止计时并关闭外呼弹窗
          this.stopCallTimer();
          this.showOutgoing = false;
          // 刷新建议项
          this.loadSuggestions();
        } else if (payload.type === 'error') {
          // 异常也需要清理
          this.stopCallTimer();
          this.showOutgoing = false;
        }
      });
    }
  },
  beforeDestroy() {
    window.removeEventListener('storage', this.handleStorageChange);
    this.stopCallTimer();
  },
  methods: {
    goBack() {
      this.$router.push({ name: 'Calls' });
    },
    closeDialpad() {
      this.showDialpad = false;
    },
    addNumber(num) {
      this.phoneNumber += num;
    },
    deleteNumber() {
      if (this.phoneNumber.length > 0) {
        this.phoneNumber = this.phoneNumber.slice(0, -1);
      }
    },
    endCall() {
      try {
        const { invoke } = window.__TAURI__.core;
        invoke('hangup_call')
          .then((res) => {
            console.log('挂断结果', res);
          })
          .catch((err) => {
            console.error('挂断失败', err);
          });
      } catch (e) {
        console.warn('Tauri 不可用，直接关闭UI');
      }
      // UI 先行关闭，后端会广播 terminated 事件用于最终收口
      this.stopCallTimer();
      this.showOutgoing = false;
    },
    makeCall() {
      if (!this.phoneNumber.trim()) return;
      const { invoke } = window.__TAURI__.core;
      invoke('make_call', { args: { target: this.phoneNumber.trim() }})
        .then((res) => {
          console.log('拨号结果', res);
          this.closeDialpad();
        })
        .catch((err) => {
          console.error('拨号失败', err);
        });
    },
    async loadSuggestions() {
      try {
        if (!window.__TAURI__ || !window.__TAURI__.core) return;
        const { invoke } = window.__TAURI__.core;
        const history = await invoke('get_call_history');
        // 按时间倒序
        const sorted = (history || []).sort((a, b) => b.timestamp - a.timestamp);
        const seenTargets = new Set();
        const top = [];
        for (const item of sorted) {
          const target = item.target || item.target_display || '';
          if (!target) continue;
          if (seenTargets.has(target)) continue;
          seenTargets.add(target);
          top.push({
            target: String(target),
            display: item.target_display || String(target),
            timestamp: item.timestamp || Date.now(),
          });
          if (top.length >= 3) break;
        }
        this.topSuggestions = top;
      } catch (err) {
        console.error('加载建议项失败', err);
        this.topSuggestions = [];
      }
    },
    callSuggestion(target) {
      if (!target) return;
      try {
        const { invoke } = window.__TAURI__.core;
        invoke('make_call', { args: { target }})
          .then((res) => {
            console.log('建议项拨号结果', res);
            this.showDialpad = false;
            // 将当前号码同步到输入框，便于后续显示
            this.phoneNumber = String(target);
          })
          .catch((err) => {
            console.error('建议项拨号失败', err);
          });
      } catch (e) {
        console.warn('Tauri 不可用，忽略真实拨号，仅同步输入框');
        this.phoneNumber = String(target);
      }
    },
    toggleSuggestions() {
      this.suggestionsCollapsed = !this.suggestionsCollapsed;
    },
    formatSuggestionSubline(timestamp) {
      const date = new Date(timestamp);
      const now = new Date();
      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      const callDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
      if (callDate.getTime() === today.getTime()) {
        return `Today | ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`;
      }
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const time = date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
      return `${month} 月 ${day} 日 | ${time}`;
    },
    startCallTimer() {
      // 重启计时器
      this.stopCallTimer();
      this.elapsedSeconds = 0;
      this.callAnswered = true;
      this.callTimerId = setInterval(() => {
        this.elapsedSeconds += 1;
      }, 1000);
    },
    stopCallTimer() {
      if (this.callTimerId) {
        clearInterval(this.callTimerId);
        this.callTimerId = null;
      }
      this.callAnswered = false;
      this.elapsedSeconds = 0;
    },
    checkSidebarState() {
      const stored = localStorage.getItem('sidebarCollapsed');
      this.sidebarCollapsed = stored !== null ? JSON.parse(stored) : true;
    },
    handleStorageChange(event) {
      if (event.key === 'sidebarCollapsed') {
        this.checkSidebarState();
      }
    }
  },
  computed: {
    dialpadOverlayStyle() {
      return {
        marginLeft: this.sidebarCollapsed ? '80px' : '280px'
      };
    },
    // 辅助：建议条目的副标题，显示“今天 HH:mm”或“M 月 D 日 | HH:mm”
    // 仅用于模板展示
    
    elapsedText() {
      const minutes = Math.floor(this.elapsedSeconds / 60);
      const seconds = this.elapsedSeconds % 60;
      return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    }
  }
}
</script>

<style scoped>
/*
  CSS 属性速查（面向初学者）
  - display: flex             将元素设为“弹性容器”。容器的直接子元素会按弹性规则排布。
  - flex-direction            设置弹性容器的“主轴方向”：row(横向)/column(纵向)。
  - justify-content           英文含义：justify=对齐/分配，content=内容；作用：沿“主轴”对齐与分布子项。
                               常用值：
                               • flex-start(起点对齐) • center(主轴居中) • flex-end(终点对齐)
                               • space-between(两端贴边，元素间距平均) • space-around(元素两侧外距相同)
                               • space-evenly(元素间距和边缘间距完全相等)
  - align-items               英文含义：align=对齐，items=子项；作用：沿“交叉轴”(与主轴垂直)对齐子项。
                               常用值：flex-start/center/flex-end/stretch/baseline。
  - gap                       子项之间的间距（比逐个写 margin 更方便），同时作用于行与列的缝隙。
  - position                  定位方式：relative(相对自身) / absolute(相对最近的定位祖先) / fixed(相对视口)。
    • position: fixed 详解：
      - 脱离普通文档流，不再占原位置；默认“相对视口”定位，页面滚动时不移动。
      - 与 absolute 区别：absolute 相对最近的“已定位”祖先或根元素；fixed 默认相对视口。
      - 特殊包含块：若祖先有 transform/filter/perspective/will-change: transform，现代浏览器可能让 fixed 相对该祖先定位。
      - 偏移/拉伸：同时设置 left+right（或 top+bottom）会把元素宽度（或高度）拉伸为 参照宽度 − 左右（或 参照高度 − 上下）。
      - 层级：可用 z-index 提升层级；z-index 非 auto 时创建层叠上下文。
      - 事件：pointer-events: none 使其“透明可穿透”；pointer-events: auto 恢复可点击。
  - top/left/right/bottom     在绝对/固定定位下，控制元素与四边的距离。
  - z-index                   层级；数值越大越在上方（仅对定位元素/弹性子项生效）。
  - width/height              宽/高。
  - max-width/max-height      最大宽/高，上界限制，超出会被挤压或出现滚动。
  - padding                   内边距（内容与容器边之间的距离）：上右下左。
  - margin                    外边距（元素与其它元素之间的距离）。
  - border                    边框；可指定宽度/样式/颜色，如 1px solid #e0e0e0。
  - border-radius             圆角；50% 可做圆形，或 16px 做圆角矩形。
  - background                背景色或背景图。
  - color                     文本颜色。
  - font-size/font-weight     字号/字重（粗细）。
  - outline                   外轮廓（用于可访问性焦点），常被去掉换自定义样式。
  - transition                过渡动画：当属性变化时以动画过渡（如 background-color 0.3s ease）。
  - transform                 几何变换：translate(位移)/scale(缩放)/rotate(旋转) 等。
  - box-shadow                阴影：依次是水平偏移、垂直偏移、模糊半径、扩散半径、颜色。
  - box-sizing                盒模型：border-box 时，padding/border 都算在 width/height 内。
  - overflow/overflow-y       溢出内容处理：visible/hidden/auto/scroll。
  - pointer-events            鼠标事件：none=不接收(让下层元素可点)，auto=正常接收。
  - animation/@keyframes      关键帧动画：名称 时长 缓动；@keyframes 定义过程。
  - word-break/overflow-wrap  处理长单词或长串字符的换行策略。
  - min-height: 0             修复 flex 子元素在某些浏览器上的默认最小高度问题。
  - overscroll-behavior       阻断滚动到达边界时把滚动“传递”给父容器。
  - scrollbar-width/-ms-*     非标准属性，用于隐藏 Firefox/旧 Edge 的滚动条。
  - ::-webkit-scrollbar       WebKit 内核（Chrome/Edge/Safari）自定义/隐藏滚动条。
*/
/* 页面根容器：填满视口，白底，避免外层滚动条 */
.new-call-container {
  height: 100vh; /* 占满视口高度，便于底部定位拨号盘 */
  background: #fff; /* 页面白色背景 */
  overflow: hidden; /* 禁止外层出现滚动条 */
  min-height: 0; /* 修复 flex 子项最小高度在部分浏览器的兼容问题 */
}

/* 主内容区域 */
/* 主内容：内边距 + 纵向布局，可自身滚动 */
.main-content {
  flex: 1; /* 占据剩余空间 */
  padding: 30px; /* 页面内边距 */
  display: flex; /* 列布局容器 */
  flex-direction: column; /* 垂直排列内容 */
  overflow-y: auto; /* 允许主区域自身滚动 */
  min-height: 0; /* 允许 flex 子项在容器内收缩 */
  width: 100%; /* 宽度撑满 */
}

/* 搜索栏 */
/* 顶部搜索栏：与下方内容留白 */
.search-bar {
  margin-bottom: 30px; /* 与下方内容留白 */
}

/* 搜索输入容器：用于放置放大镜图标 */
.search-input {
  position: relative; /* 作为图标的定位参考 */
  max-width: 100%; /* 宽度不超过容器 */
}

/* 输入框内的放大镜图标，绝对定位到左侧垂直居中 */
.search-icon {
  position: absolute; /* 绝对定位在输入框内部 */
  left: 15px; /* 与左侧间距 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 精准垂直居中 */
}

/* 顶部大搜索框：圆角、浅灰底、过渡动效 */
.search-field {
  width: 100%; /* 宽度占满 */
  padding: 15px 15px 15px 45px; /* 左侧留出图标空间 */
  border: 1px solid #e0e0e0; /* 边框浅灰 */
  border-radius: 12px; /* 圆角 */
  font-size: 14px; /* 字号 */
  background: #f8f9fa; /* 浅灰背景 */
  outline: none; /* 去除系统焦点描边 */
  transition: border-color 0.3s ease; /* 焦点切换动效 */
}

/* 顶部大搜索框：获得焦点时高亮 */
.search-field:focus {
  border-color: #ff6b35; /* 焦点时高亮边框（品牌橙） */
  background: white; /* 焦点时提升对比 */
}

/* 顶部大搜索框：占位符颜色 */
.search-field::placeholder {
  color: #666; /* 占位符颜色较淡 */
}

/* 标题和返回按钮 */
/* 顶部返回 + 标题区域：水平排布，间距 15px */
.header {
  display: flex; /* 水平布局 */
  align-items: center; /* 垂直居中 */
  gap: 15px; /* 元素间距 */
  margin-bottom: 30px; /* 与下方内容留白 */
}

/* 返回按钮：圆角方块，浅灰底，悬停变深 */
.back-button {
  width: 40px; /* 尺寸 40 */
  height: 40px;
  border: none; /* 无边框 */
  border-radius: 8px; /* 圆角 */
  background: #f8f9fa; /* 浅灰底 */
  cursor: pointer; /* 可点击指针 */
  display: flex; /* 居中图标 */
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease; /* 悬停动画 */
}

.back-button:hover {
  background: #e9ecef; /* 悬停时颜色更深 */
}

/* 页面标题：加粗放大 */
.page-title {
  font-size: 28px; /* 大字号 */
  font-weight: 700; /* 粗体 */
  color: #1a1a1a; /* 深色文字 */
  margin: 0; /* 去除默认外边距 */
}

/* 联系人搜索 */
/* 联系人搜索框区域：与下方内容留白 */
.contact-search {
  margin-bottom: 30px; /* 区块下方留白 */
}

/* 联系人搜索容器：用于放置图标与九宫格按钮 */
.contact-input-container {
  position: relative; /* 供内部图标绝对定位 */
  max-width: 100%;
}

/* 联系人搜索输入：右侧为拨号盘图标预留空间 */
.contact-input {
  width: 100%; /* 宽度占满 */
  padding: 18px 60px 18px 45px; /* 右侧为九宫格图标预留空间 */
  border: 1px solid #e0e0e0; /* 边框浅灰 */
  border-radius: 12px; /* 圆角 */
  font-size: 16px; /* 字号稍大 */
  background: #f8f9fa; /* 浅灰背景 */
  outline: none; /* 去掉浏览器默认焦点边框 */
  transition: border-color 0.3s ease; /* 悬浮/聚焦过渡 */
}

/* 联系人搜索输入：聚焦高亮 */
.contact-input:focus {
  border-color: #ff6b35; /* 聚焦时边框高亮 */
  background: white; /* 背景变白更清晰 */
}

/* 联系人搜索输入：占位符 */
.contact-input::placeholder {
  color: #666; /* 占位符颜色 */
}

/* 右侧拨号盘图标：可点击，悬停有浅灰底 */
.dialpad-icon {
  position: absolute; /* 叠放在输入框右侧 */
  right: 15px; /* 右侧内边距 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 精准居中 */
  cursor: pointer; /* 鼠标指示为可点击 */
  padding: 5px; /* 点击热区 */
  border-radius: 6px; /* 悬停时浅灰底的圆角 */
  transition: background-color 0.3s ease; /* 悬停过渡 */
}

/* 拨号盘图标：悬停反馈 */
.dialpad-icon:hover {
  background: #e9ecef; /* 悬停浅灰底反馈 */
}

/* 建议列表 */
/* 建议列表区域：占据剩余空间 */
.suggestions-section {
  flex: 1; /* 占据主区域剩余高度 */
}

/* 建议列表头部：标题 + 展开折叠图标 */
.suggestions-header {
  display: flex; /* 标题与图标水平排 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 20px; /* 与列表留白 */
}

/* 建议标题样式 */
.suggestions-title {
  font-size: 18px; /* 标题字号 */
  font-weight: 600; /* 半粗体 */
  color: #1a1a1a; /* 深色文字 */
  margin: 0; /* 去默认外边距 */
}

/* 向上箭头：可点击并有缩放反馈 */
.chevron-up {
  cursor: pointer; /* 可点击 */
  transition: transform 0.3s ease; /* 悬停缩放过渡 */
}

/* 箭头：悬停缩放 */
.chevron-up:hover {
  transform: scale(1.1); /* 悬停放大 */
}

/* 折叠态：箭头向下（旋转 180 度） */
.chevron-up.collapsed {
  transform: rotate(180deg);
}

/* 建议项容器：纵向列表，行距 15px */
.suggestions-list {
  display: flex; /* 纵向堆叠 */
  flex-direction: column;
  gap: 15px; /* 行间距 */
}

/* 单条建议：圆角卡片，悬停变色 */
.suggestion-item {
  display: flex; /* 头像 + 文本 */
  align-items: center; /* 垂直居中 */
  gap: 15px; /* 间距 */
  padding: 15px; /* 内边距 */
  border-radius: 12px; /* 圆角卡片 */
  background: #f8f9fa; /* 浅灰背景 */
  cursor: pointer; /* 可点击 */
  transition: background-color 0.3s ease; /* 悬停过渡 */
}

/* 建议项：悬停态 */
.suggestion-item:hover {
  background: #e9ecef; /* 悬停变深 */
}

/* 建议头像：40 圆形，蓝底白字 */
.suggestion-avatar {
  width: 40px; /* 头像直径 */
  height: 40px;
  border-radius: 50%; /* 圆形 */
  background: #007bff; /* 蓝底 */
  display: flex; /* 居中文字 */
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* 防止因文本挤压而变形 */
}

/* 头像文字：白色加粗 */
.avatar-number {
  color: white; /* 白字 */
  font-weight: 600; /* 半粗体 */
  font-size: 16px; /* 字号 */
}

/* 建议文本信息区：占满剩余空间 */
.suggestion-info {
  flex: 1; /* 占据剩余空间 */
  min-width: 0; /* 允许文本换行 */
}

/* 建议名称：加粗 */
.suggestion-name {
  font-size: 16px; /* 名称字号 */
  font-weight: 600; /* 半粗 */
  color: #1a1a1a; /* 深色 */
  margin-bottom: 4px; /* 与地址分隔 */
}

/* 建议地址：较小字号、换行断行 */
.suggestion-address {
  font-size: 14px; /* 地址较小 */
  color: #666; /* 次要文本色 */
  word-break: break-all; /* 避免长串溢出 */
  overflow-wrap: break-word; /* 单词换行 */
  max-width: 100%; /* 不超过容器 */
}

/* 拨号盘弹窗样式 */
/* 拨号盘覆盖层：固定定位，底部对齐；允许事件穿透主界面 */
.dialpad-overlay {
  position: fixed; /* 固定在视口，不随页面滚动 */
  top: 0; /* 顶部吸附 */
  left: 0; /* 左侧吸附 */
  right: 0; /* 右侧吸附 */
  bottom: 0; /* 底部吸附（形成全屏层） */
  display: flex; /* 使用 flex 便于底部对齐 */
  align-items: flex-end; /* 将内容推到底部 */
  justify-content: center; /* 水平居中拨号盘 */
  z-index: 1000; /* 位于主界面之上 */
  /* 动态margin-left通过内联样式控制 */
  pointer-events: none; /* 允许事件穿透到主界面（非模态交互） */
  padding-bottom: 0px; /* 可上移/下调拨号盘整体位置 */
}

/* 拨号盘面板：白底圆角，上沿圆角更明显；列布局 */
.dialpad-modal {
  background: white; /* 面板白底 */
  border-radius: 16px 16px 0 0; /* 只有上边圆角 */
  padding: 12px 16px 16px; /* 内边距（头部更紧凑） */
  width: 360px; /* 固定宽度，保证布局稳定 */
  max-width: 88vw; /* 小屏下适配 */
  height: 56vh; /* 稍微超过半屏一点点 */
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18); /* 顶部阴影 */
  animation: slideUp 0.25s ease; /* 自底向上出现 */
  pointer-events: auto; /* 接收点击事件 */
  margin-bottom: 0; /* 紧贴底部 */
  overflow: hidden; /* 裁切子内容 */
  display: flex; /* 纵向布局：头部 + 内容 + 操作区 */
  flex-direction: column;
  box-sizing: border-box; /* 包含内边距在宽高计算内 */
}

/* 外呼弹框样式：贴底、与拨号盘风格一致更简洁 */
.outgoing-modal {
  background: #1f1f1f; /* 深色背景贴合截图风格 */
  color: #e6e6e6;
  border-radius: 16px 16px 0 0;
  padding: 16px;
  width: 360px;
  max-width: 88vw;
  height: 56vh;
  box-shadow: 0 -8px 24px rgba(0,0,0,.3);
  animation: slideUp 0.25s ease;
  pointer-events: auto;
  margin-bottom: 0; /* 紧贴底部 */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.outgoing-header {
  display: flex; /* justify-content 作用：主轴(水平)两端对齐 */
  justify-content: space-between;
  align-items: center; /* align-items 作用：交叉轴(垂直)居中 */
  margin-bottom: 8px;
}

.outgoing-title {
  font-size: 14px;
  opacity: .8;
}

.outgoing-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 0 16px;
}

.callee-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: #dbe8ef;
  color: #2a3d4a;
  display: flex; justify-content: center; align-items: center;
  font-size: 40px; font-weight: 700;
}

.callee-name {
  font-size: 20px; font-weight: 600;
}

.callee-sip {
  font-size: 12px; opacity: .8;
}

.outgoing-actions {
  display: flex; justify-content: center; align-items: center;
  flex-direction: column;
  gap: 10px;
}

.hangup-button {
  width: 56px; height: 56px; border: none; border-radius: 50%;
  background: #e35b57; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, filter .2s ease;
}
.hangup-button:hover { filter: brightness(.95); transform: scale(1.05); }
.hangup-button:active { transform: scale(.95); }

.call-timer {
  font-size: 12px;
  opacity: .9;
}

/* 弹出动画：自底部滑入 */
@keyframes slideUp {
  from {
    opacity: 0; /* 初始完全透明 */
    transform: translateY(100%); /* 从容器下方（100% 高度）开始 */
  }
  to {
    opacity: 1; /* 动画结束时完全可见 */
    transform: translateY(0); /* 回到原位 */
  }
}

/* 拨号盘头部：仅保留关闭按钮，右对齐、压缩占高 */
.dialpad-header {
  display: flex; /* 放关闭按钮 */
  justify-content: flex-end; /* 右侧对齐 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 8px; /* 压缩顶部占高 */
}

/* 关闭按钮：小圆按钮，浅灰底，悬停变深 */
.dialpad-close {
  width: 24px; /* 按钮宽度 */
  height: 24px; /* 按钮高度 */
  border-radius: 50%; /* 圆形按钮 */
  background: #f8f9fa; /* 浅灰背景 */
  display: flex; /* 便于居中图标 */
  align-items: center; /* 垂直居中图标 */
  justify-content: center; /* 水平居中图标 */
  cursor: pointer; /* 鼠标指针样式 */
  transition: background-color 0.3s ease; /* 悬停时背景色过渡 */
}

/* 关闭按钮：悬停态 */
.dialpad-close:hover {
  background: #e9ecef;
}

/* 数字按键容器：纵向网格，不滚动（overflow: hidden） */
.dialpad-grid {
  padding-top: 1px;
  padding-bottom: 1px;
  display: flex; /* 数字行纵向堆叠 */
  flex-direction: column;
  gap: 10px; /* 行间距 */
  margin-bottom: 10px; /* 与底部操作区间距 */
  overflow: hidden; /* 完全禁止滚动 */
  overscroll-behavior: contain; /* 阻断滚动链（若恢复滚动时有用） */
  flex: 1; /* 占据中间可用高度 */
  min-height: 0; /* 允许在容器中收缩 */
  scrollbar-width: none; /* Firefox 隐藏滚动条（备份） */
  -ms-overflow-style: none; /* IE/Edge 隐藏滚动条（备份） */
}

/* Chromium/WebKit 隐藏滚动条 */
/* 隐藏 WebKit 内核滚动条（兼容性处理） */
.dialpad-grid::-webkit-scrollbar {
  width: 0; /* 隐藏垂直滚动条 */
  height: 0; /* 隐藏宝条 */
}

/* 数字按键行：水平居中，行内间距 12px */
.dialpad-row {
  display: flex; /* 行内水平排列按钮 */
  gap: 12px; /* 按钮之间的水平间距 */
  justify-content: center; /* 行内水平居中 */
}

/* 单个数字按钮：48 圆直径，hover/active 反馈 */
.dialpad-button {
  width: 48px; /* 按钮直径 */
  height: 48px; /* 按钮直径 */
  border: 1px solid #e0e0e0; /* 细边框 */
  border-radius: 50%; /* 圆形按钮 */
  background: white; /* 白色底色 */
  font-size: 18px; /* 数字字号 */
  font-weight: 500; /* 半粗体 */
  color: #1a1a1a; /* 深色数字 */
  cursor: pointer; /* 指针手势 */
  transition: all 0.2s ease; /* 悬停/按下的过渡 */
  display: flex; /* 让数字在按钮内居中 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

/* 数字按钮：悬停态 */
.dialpad-button:hover {
  background: #f8f9fa; /* 悬停时浅灰底 */
  border-color: #ff6b35; /* 边框高亮（品牌橙） */
  transform: scale(1.05); /* 略微放大提反馈 */
}

/* 数字按钮：按下态 */
.dialpad-button:active {
  transform: scale(0.95); /* 按下缩小，模拟按压感 */
}

/* 底部动作区：拨号 + 删除，居中排列、间距适中 */
.dialpad-actions {
  display: flex; /* 横向排列拨号/删除 */
  gap: 16px; /* 按钮之间的间距 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin-top: 2px; /* 与上方数字区域的距离 */
}

/* 拨号按钮：绿色圆形，48 直径 */
.call-button {
  width: 48px; /* 直径 48 */
  height: 48px; /* 直径 48 */
  border: none; /* 去边框 */
  border-radius: 50%; /* 圆形按钮 */
  background: #28a745; /* 绿色（拨号色） */
  cursor: pointer; /* 指针手势 */
  display: flex; /* 居中图标 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  transition: all 0.2s ease; /* 悬停/按下过渡 */
}

/* 拨号按钮：悬停态 */
.call-button:hover {
  background: #218838; /* 悬停更深的绿 */
  transform: scale(1.05); /* 略微放大反馈 */
}

/* 拨号按钮：按下态 */
.call-button:active {
  transform: scale(0.95); /* 按下缩小反馈 */
}

/* 删除按钮：灰色圆角方，稍小于拨号按钮 */
.delete-button {
  width: 40px; /* 宽度 */
  height: 40px; /* 高度 */
  border: none; /* 去边框 */
  border-radius: 12px; /* 圆角矩形 */
  background: #6c757d; /* 中性灰色 */
  cursor: pointer; /* 指针手势 */
  display: flex; /* 居中图标 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  transition: all 0.2s ease; /* 悬停/按下过渡 */
}

/* 删除按钮：悬停态 */
.delete-button:hover {
  background: #5a6268; /* 悬停更深的灰 */
  transform: scale(1.05); /* 略微放大反馈 */
}

/* 删除按钮：按下态 */
.delete-button:active {
  transform: scale(0.95); /* 按下缩小反馈 */
}

/* 响应式设计 - 弹窗位置现在通过JavaScript动态控制 */
</style>
